<template>
  <view class="interview-detail-page">
    <!-- 导航栏 -->
    <up-navbar :title="'面试详情'" :autoBack="true" :placeholder='true'></up-navbar>

    <!-- 主要内容 -->
    <scroll-view scroll-y class="page-content">
      <!-- 公司基本信息 -->
      <view class="company-card">
        <view class="company-header" @click="gotoUrl('/pages/office/firm/firm?id='+detailData.company_id)">
          <image class="company-logo" :src="detailData.images" mode="aspectFill" />
          <view class="company-info">
            <text class="company-name">{{ detailData.title }}</text>
            <text class="company-industry">{{ detailData.nature_name }} | {{ detailData.guimo }}</text>
          </view>
        </view>

        <view class="job-info" @click='gotoUrl("/pages/office/home/home?id="+detailData.position_id)'>
          <text class="job-title">{{ detailData.position_title }}</text>
          <text class="job-salary">{{ detailData.money_range }} </text>
        </view>
      </view>

      <!-- 面试信息卡片 -->
      <view class="info-card">
        <view class="card-title">
          <text>面试信息</text>
        </view>

        <view class="info-item">
          <up-icon name="calendar" color="#3F77FB" size="32rpx"></up-icon>
          <text class="info-label">面试时间：</text>
          <text class="info-value">{{ detailData.dates }} {{ detailData.times }}</text>
        </view>

        <view class="info-item">
          <up-icon name="pushpin-fill" color="#3F77FB" size="32rpx"></up-icon>
          <text class="info-label">面试地点：</text>
          <text class="info-value">{{ detailData.postion_address }}</text>
        </view>

        <view class="info-item">
          <up-icon name="account-fill" color="#3F77FB" size="32rpx"></up-icon>
          <text class="info-label">联系人：</text>
          <text class="info-value">{{ detailData.lx_nickname }}</text>
        </view>

        <view class="info-item">
          <up-icon name="phone" color="#3F77FB" size="32rpx"></up-icon>
          <text class="info-label">联系电话：</text>
          <text class="info-value">{{ detailData.lx_mobile }}</text>
        </view>

        <view class="info-item">
          <up-icon name="clock" color="#3F77FB" size="32rpx"></up-icon>
          <text class="info-label">面试状态：</text>
          <text class="info-value"
            :class="{ 'status-pending': detailData.status === 0, 'status-accepted': detailData.status === 1, 'status-rejected': detailData.status === 2 }">
            {{ getStatusText(detailData.status) }}
          </text>
        </view>
      </view>

      <!-- 备注信息
      <view class="info-card">
        <view class="card-title">
          <text>福利待遇</text>
        </view>
        <view class="remark-content">
          {{ detailData.fringe || '暂无' }}
        </view>
      </view> -->

      <!-- 操作按钮 -->
      <view class="action-buttons" v-if="detailData.status === 0">
        <up-button type="error" text="拒绝面试" @click="handleReject" class="action-btn"></up-button>
        <up-button type="primary" text="接受面试" @click="handleAccept" class="action-btn"></up-button>
      </view>

      <!-- 已接受/已拒绝提示 -->
      <view class="status-tips" v-if="detailData.status !== 0">
        <text class="tips-text">{{ getStatusTips(detailData.status) }}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 面试详情数据
const detailData = ref({
  id: 0,
  companyName: '',
  companyLogo: '',
  industry: '',
  companyScale: '',
  jobTitle: '',
  salaryRange: '',
  interviewTime: '',
  interviewAddress: '',
  contactPerson: '',
  contactPhone: '',
  remark: '',
  status: 0, // 0-待接受 1-已接受 2-已拒绝
  createTime: ''
})

// 获取面试状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0: return '待接受'
    case 1: return '已接受'
    case 2: return '已拒绝'
    default: return '未知状态'
  }
}

// 获取状态提示文本
const getStatusTips = (status: number) => {
  switch (status) {
    case 1: return '您已接受此面试邀请，请按时参加面试'
    case 2: return '您已拒绝此面试邀请'
    default: return ''
  }
}

// 接受面试
const handleAccept = () => {
  uni.showModal({
    title: '确认接受',
    content: '确定要接受此面试邀请吗？',
    success: async (res) => {
      if (res.confirm) {
        const res = await uni.$u.post('/msg/accept_invitation', { id: detailData.value.id })
        if (res.code == 1) {
          uni.showToast({ title: "接受成功" })
          uni.navigateBack()
        } else {
          uni.showToast({ title: res.msg })
        }
      }
    }
  })
}

// 拒绝面试
const handleReject = () => {
  uni.showModal({
    title: '确认拒绝',
    content: '确定要拒绝此面试邀请吗？',
    success: async (res) => {
      if (res.confirm) {
        const res = await uni.$u.post('/msg/refuse_interview', { id: detailData.value.id })
        if (res.code == 1) {
          uni.showToast({ title: "操作成功" })
          uni.navigateBack()
        } else {
          uni.showToast({ title: res.msg })
        }
      }
    }
  })
}
function gotoUrl(url){
	uni.navigateTo({
		url
	})
}
// 页面加载时获取数据
onLoad((options) => {
  if (options?.id) {
    fetchInterviewDetail(options.id)
  } else {
    uni.showToast({ title: '参数错误', icon: 'error' })
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
  }
})

// 获取面试详情
const fetchInterviewDetail = (id: number) => {
  // console.log(uni.getStorageSync('interviewData'))
  // let data = uni.getStorageSync('interviewData') || {}
  // data.status = Number(data.status)
  // detailData.value = data
  uni.showLoading({ title: '加载中' })
  uni.$u.get(`/position/invateInterviewInfo`, { id }).then(res => {
    res.data.status = Number(res.data.status)
    detailData.value = res.data
  }).catch(err => {
    uni.showToast({ title: '加载失败', icon: 'error' })
  }).finally(() => {
    uni.hideLoading()
  })
}
</script>

<style lang="scss" scoped>
.interview-detail-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f7f7f7;

  .page-content {
    flex: 1;
    padding: 20rpx;
    box-sizing: border-box;
  }

  .company-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .company-header {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;

      .company-logo {
        width: 100rpx;
        height: 100rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }

      .company-info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .company-name {
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 10rpx;
        }

        .company-industry {
          font-size: 24rpx;
          color: #999;
        }
      }
    }

    .job-info {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .job-title {
        font-size: 28rpx;
        font-weight: bold;
      }

      .job-salary {
        font-size: 28rpx;
        color: #ff6b00;
        font-weight: bold;
      }
    }
  }

  .info-card {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;

    .card-title {
      font-size: 28rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      padding-bottom: 10rpx;
      border-bottom: 1rpx solid #eee;
    }

    .info-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        margin-left: 10rpx;
        color: #666;
        width: 160rpx;
      }

      .info-value {
        flex: 1;

        &.status-pending {
          color: #ff9900;
        }

        &.status-accepted {
          color: #07c160;
        }

        &.status-rejected {
          color: #ff4d4f;
        }
      }
    }

    .remark-content {
      line-height: 1.6;
      color: #666;
    }
  }

  .action-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 40rpx;

    .action-btn {
      width: 48%;
    }
  }

  .status-tips {
    margin-top: 40rpx;
    text-align: center;

    .tips-text {
      color: #666;
      font-size: 26rpx;
    }
  }
}
</style>